import { createApi,fetchBaseQuery } from '@reduxjs/toolkit/query/react';


const apiSlice = createApi({
    // 缓存减速器预计将添加到'state.api'
    reducerPath: "api",
    // 我们所有的请求都有以"/fakeApi"开头的URL
    baseQuery: fetchBaseQuery({ baseUrl: "/fakeApi"}),
    // 声明数据类型的字符串名称数组，例如：'Post'
    tagTypes: ["Post"],
    // "endpoints" 代表对服务器的操作和请求
    endpoints: (builder) => ({
        // getPosts endpoint 是一个返回数据的"Query"操作
        getPosts: builder.query({
            query: () => "/posts",
            // 列出了一组描述该查询中数据的标签
            //providesTags: ["Post"],
            providesTags: (result=[],error,args) => [
                "Post",
                ...result.map(({id})=>({ type: "Post",id }))
            ]
        }),
        getPost: builder.query({
            query: (postId) => `/posts/${postId}`,
            providesTags: (result,error,arg) => [{type: "Post",id: arg}]
        }),
        // 这里的query选项返回一个包含{url,method,body}的对象。
        // 由于我们使用fetchBaseQuery来发出请求，body字段将自动为我们进行JSON序列化。
        addNewPost: builder.mutation({
            query: (initialPost) => {
                console.log('addNewPost-initialPost',initialPost)
                return ({
                    url: "/posts",
                    method: "POST",
                    body: initialPost
                })
            },
            // 列出了每次Mutation运行时失效的一组标签
            invalidatesTags: ["Post"],
        }),
        editPost: builder.mutation({
            query: (post) => {
                console.log('editPost-post',post)
                return ({
                    url: `/posts/${post.id}`,
                    method: "PATCH",
                    body: post
                })
            },
            //invalidatesTags: ["Post"],
            invalidatesTags: (result,error,arg) => [{type: "Post",id: arg.id}]
        }),
        getUsers: builder.query({
            query: () => "/users"
        }),
        addReaction: builder.mutation({
            query: ({postId,reaction}) => ({
                url: `posts/${postId}/reactions`,
                method: "POST",
                body: { reaction }
            }),
            // invalidatesTags: (result,error,arg) => [{ type: "Post", id: arg.postId }]
            // RTK Query允许你通过基于请求生命周期处理程序修改客户端缓存来实现Optimistic Updates。
      //    // 请求接口可以定义一个onQueryStarted函数，该函数将在请求开始时调用，我们可以在该处理程序中运行其他逻辑。
            async onQueryStarted({ postId, reaction }, { dispatch, queryFulfilled }) {
                console.log('onQueryStarted')
                // `updateQueryData` 需要请求接口名称和缓存键参数，
                // 所以它知道要更新哪一块缓存状态
                const patchResult = dispatch(
                  apiSlice.util.updateQueryData("getPosts", undefined, (draft) => {
                    console.log('draft',draft)
                    // `draft` 是 Immer-wrapped 的，可以像 createSlice 中一样 “mutated”
                    const post = draft.find((post) => post.id === postId);
                    if (post) {
                      post.reactions[reaction]++;
                    }
                  })
                );
                try {
                  await queryFulfilled;
                } catch {
                  patchResult.undo();
                }
            },
        }),
    }),
})

export const { 
    useGetPostsQuery,
    useGetPostQuery,
    useGetUserQuery, 
    useAddNewPostMutation,
    useEditPostMutation,
    useAddReactionMutation,
} = apiSlice;

//console.log('apiSlice',apiSlice)

export default apiSlice;